<script setup lang="ts" name="BasicInfo">
import { getIntDictOptions } from '@/utils/dict'
import { DICT_TYPE } from '@/enums/dictEnums'
import { useUserStoreWithOut } from '@/store/modules/user'
import { ProfileApi, UserProfileUpdateReqType, ProfileType } from '@/api/system/user/profile'
import type { FormItemRule } from 'element-plus' // 导入 RuleType 类型
import { PropType } from 'vue'

const props = defineProps({
  userInfo: { type: Object as PropType<ProfileType> }
})

const userStore = useUserStoreWithOut()
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const formData = ref({
  nickname: '',
  email: '',
  mobile: '',
  sex: 1
})
// 表单校验
const formRules = reactive<Record<string, FormItemRule[]>>({
  nickname: [{ required: true, message: t('profile.rules', 'nickname'), trigger: 'blur' }],
  email: [
    { required: true, message: t('profile.rules', 'mail'), trigger: 'blur' },
    {
      type: 'email',
      message: t('profile.rules', 'trueMail'),
      trigger: ['blur', 'change']
    }
  ],
  mobile: [
    { required: true, message: t('profile.rules', 'mobile'), trigger: 'blur' },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: t('profile.rules', 'trueMobile'),
      trigger: 'blur'
    }
  ]
})

const formRef = ref() // 表单 Ref
const submit = async () => {
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  const data = formData.value as UserProfileUpdateReqType
  await ProfileApi.update(data)
  message.success(t('message', 'updateSuccess'))
  userStore.setUserBasicInfoAction(formData.value)
}

watch(
  () => props.userInfo,
  (v) => {
    if (v) {
      formData.value.nickname = v.nickname
      formData.value.email = v.email
      formData.value.mobile = v.mobile
      formData.value.sex = v.sex
    }
  },
  {
    deep: true,
    immediate: true
  }
)
const init = () => {
  if (!props.userInfo) return
  formData.value.nickname = props.userInfo.nickname
  formData.value.email = props.userInfo.email
  formData.value.mobile = props.userInfo.mobile
  formData.value.sex = props.userInfo.sex
}
</script>

<template>
  <el-form ref="formRef" :labelWidth="120" :model="formData" :rules="formRules" label-position="right">
    <ElFormItem :label="t('profile.user', 'nickname')" prop="nickname">
      <el-input v-model="formData.nickname" :placeholder="t('profile.rules', 'nickname')" />
    </ElFormItem>
    <ElFormItem :label="t('profile.user', 'mobile')" prop="mobile">
      <el-input v-model="formData.mobile" :placeholder="t('profile.rules', 'mobile')" />
    </ElFormItem>
    <ElFormItem :label="t('profile.user', 'mail')" prop="email">
      <el-input v-model="formData.email" :placeholder="t('profile.rules', 'mail')" />
    </ElFormItem>
    <ElFormItem :label="t('profile.user', 'sex')" prop="sex">
      <el-radio-group v-model="formData.sex" class="radio-button">
        <el-radio-button v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)" :key="dict.value" :value="dict.value">
          {{ dict.label }}
        </el-radio-button>
      </el-radio-group>
    </ElFormItem>
    <ElFormItem>
      <div class="flex flex-1 items-center justify-center">
        <CButton :title="t('action', 'save')" type="primary" @click="submit()" />
        <CButton :title="t('action', 'reset')" type="danger" @click="init()" />
      </div>
    </ElFormItem>
  </el-form>
</template>

<style scoped lang="scss"></style>
